
import "./index.scss"
import React, { Component,createElement } from 'react';
import { Tabs,Input, Space ,Form,  Button, Row ,Col,Tag,Comment,Avatar,Tooltip, message,Popconfirm} from 'antd';
import { ajax } from '../../api';
import myuser from "../../mobx/myuser"
import { baseURL } from '../../api/http';
import { EyeInvisibleOutlined, EyeTwoTone , DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
import { roleList, xinbie,history } from "../../utils";
import {observer} from "mobx-react"
import {passReg} from "../../utils/validate"
import moment from "moment"

const { TextArea } = Input;
const { TabPane } = Tabs;
const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
        span: 24,
        offset: 0,
        },
        sm: {
        span: 16,
        offset: 8,
        },
    },
};
@observer
class Mine extends Component {

    state={
        list:[]
    }

    componentDidMount(){
       myuser.changeUser(()=>{
            this.gaifrom.setFieldsValue({
                username:myuser.user.username
            })
       })
      this.getdongtai()
     
    }

    getdongtai=(cb)=>{
        ajax.dongtai().then(res=>{
            if(res.code==200){
                this.setState({
                    list:res.result
                })
                cb&&cb()
            }
        })
    }

    updatepasssubmit=()=>{
        this.gaifrom.validateFields().then(value=>{
            console.log(value)
            ajax.updatapassword(value).then(res=>{
                if(res.code==200){
                    localStorage.removeItem("token")
                    history.push("/login")
                }
            })
        }).catch(err=>{
            message.error("请填写完整数据再提交")
        })
    }

    like = (item) => {
        ajax.addlike({
            _id:item._id
        }).then(res=>{
            if(res.code==200){
                this.getdongtai()
            }
        })
    };

    dislike = (item) => {
        ajax.dislike({
            _id:item._id
        }).then(res=>{
            if(res.code==200){
                this.getdongtai()
            }
        })
    };

    delconfirm=(item,index)=>{
        ajax.removeOne({
            _id:item._id
        }).then(res=>{
            if(res.code==200){
                var list1 = this.state.list.filter(val=>val._id!=item._id)
                this.setState({
                    list:list1
                })
            }
        })
    }


    adddongtai=()=>{
        var dtContent=this.dongtai.resizableTextArea.props.value
        if(dtContent){
            ajax.adddonftai({
                content:dtContent
            }).then(res=>{
                if(res.code==200){
                    this.getdongtai(()=>{
                        var a= document.getElementById("neirong")
                        a.value=""
                    })
                }
            })
        }else{
            message.error("请先填写动态后再提交")
        }
    }

    reset=()=>{
        var a= document.getElementById("neirong")
        a.value=""
    }

    // getgeren
    render() {
        const {user}=myuser
        const {list} = this.state
        
        return (
                <div>
                    <Row>
                        <Col span={6}>
                            <div style={{width: "100%",padding:20,boxShadow:" #ccc 0px 0px 5px 5px"}} className="row">
                                <div className="profile-userpic">
                                    {user.avatar?
                                    <img src={user.avatar.replace(/public/,baseURL)} alt=""/>:<img src={require("../../assets/images/01.png").default} alt=""/>
                                    } 
                                </div>
                                <div className="profile-usertitle">
                                    <div style={{marginTop:10}} className="profile-usertitle-name"> {user.username}</div>
                                    <div className="profile-usertitle-job">{user.username&&<Tag>{roleList[user.role].name}</Tag>}</div>
                                </div>
                                <ul className="list-group list-group-unbordered">
                                    <li className="list-group-item">
                                        <b>手机号</b> <a className="pull-right">{user.phone}</a>
                                    </li>
                                    <li className="list-group-item">
                                        <b>性别</b> <a className="pull-right">{user.username&&<Tag color={xinbie[user.sex].color}>{xinbie[user.sex].name}</Tag>}</a>
                                    </li>
                                </ul>
                                <div style={{textAlign:"center"}} className="profile-userbuttons">
                                    <Button style={{borderRadius:"5px",marginRight:10,marginTop:20}} type="primary">个人信息请勿泄露</Button>
                                </div>
                            </div>
                        </Col>
                        <Col span={8} offset={2}>
                            <div className="geng" style={{boxShadow:" #ccc 0px 0px 5px 5px"}}>
                                <h3 className="gai">添加动态</h3>
                                <TextArea autoSize={{minRows: 6, maxRows: 6}} maxLength={200} size="middle" ref={el=>this.dongtai=el} id="neirong" bordered/>
                                <div style={{marginTop:40,display:"flex",justifyContent:"space-around"}}>
                                    <Button type="primary" size="large" onClick={this.adddongtai}>发表动态</Button>
                                    <Button type="danger" size="large" onClick={this.reset}>重置</Button>
                                </div>
                            </div>
                        </Col>
                        <Col span={6} offset={2}> 
                            <div className="geng" style={{boxShadow:" #ccc 0px 0px 5px 5px"}}>
                                <h3 className="gai">密码更改</h3>
                                    <Form
                                        {...formItemLayout}
                                        name="register"
                                        initialValues={{
                                            
                                        }}
                                        ref={el=>this.gaifrom=el}
                                        scrollToFirstError
                                        >
                                        <Form.Item
                                            name="username"
                                            label="用户名"
                                            rules={[
                                            {
                                                required: true,
                                                message: '请输入用户名',
                                            },
                                            ]}
                                        >
                                            <Input disabled/>
                                        </Form.Item>

                                        <Form.Item
                                            name="password"
                                            label="旧密码"
                                            rules={[
                                            {
                                                required: true,
                                                message: '请输入旧密码',
                                            },
                                            {
                                                pattern:passReg,
                                                message:"请输入正确的密码"
                                            }
                                            ]}
                                            hasFeedback
                                        >
                                            <Input.Password />
                                        </Form.Item>

                                        <Form.Item
                                            name="newpassword"
                                            label="新密码"
                                            dependencies={['password']}
                                            hasFeedback
                                            rules={[
                                            {
                                                required: true,
                                                message: '请输入新密码',
                                            },
                                            ({ getFieldValue }) => ({
                                                validator(_, value) {
                                                if (!value || getFieldValue('password') === value) {
                                                    return Promise.reject('两次输入的密码相同');
                                                }
                                                return Promise.resolve();
                                                },
                                            }),
                                            {
                                                pattern:passReg,
                                                message:"请输入正确的密码"
                                            }
                                            ]}
                                        >
                                            <Input.Password />
                                        </Form.Item>
                                    </Form>
                                    <Form.Item {...tailFormItemLayout}>
                                        <Button type="danger" style={{borderRadius:"5px",marginTop:20}} onClick={this.updatepasssubmit} size="large">
                                             提交修改
                                        </Button>
                                    </Form.Item>
                            </div> 
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <div style={{width: "100%",background: "#f0f2f5",padding: 20,marginTop:20,height:320,overflowY:"auto",boxShadow:" #ccc 0px 0px 5px 5px"}}>
                                <h3 style={{height:50,lineHeight:"50px", textAlign:"center",fontSize:20,backgroundColor:"#fff"}}>最新动态</h3>
                                <div style={{backgroundColor:"#fff",padding:20}}>
                                    {
                                        list.length>0?(<div>
                                            {
                                                list.map((item,i)=>{
                                                    return (
                                                        <Comment
                                                        actions={[
                                                            <Tooltip key="comment-basic-like">
                                                            <span onClick={()=>this.like(item)}>
                                                                {createElement( (item.likelist).includes(localStorage.getItem("username"))  ? LikeFilled : LikeOutlined )}
                                                                <span className="comment-action">{item.likelist.length}</span>
                                                            </span>
                                                            </Tooltip>,
                                                            <Tooltip key="comment-basic-dislike">
                                                            <span onClick={()=>this.dislike(item)}>
                                                                {React.createElement((item.dislikelist).includes(localStorage.getItem("username"))  ?  DislikeFilled : DislikeOutlined  )}
                                                                <span className="comment-action">{item.dislikelist.length}</span>
                                                            </span>
                                                            </Tooltip>,
                                                            <Popconfirm
                                                                title="您确定要删除当前动态吗？"
                                                                onConfirm={()=>this.delconfirm(item,i)}
                                                                okText="确定"
                                                                cancelText="取消"
                                                                disabled={item.username==localStorage.getItem("username")?false:true}
                                                            >
                                                            {
                                                              item.username==localStorage.getItem("username")&&<span key="comment-basic-reply-to">删除</span>
                                                            }
                                                            </Popconfirm>
                                                            
                                                        ]}

                                                            key={i}
                                                            author={<a style={{fontSize:20}}>{item.username}</a>}
                                                            avatar={
                                                                <Avatar
                                                                src={item.avatar.replace(/public/,baseURL)}
                                                                alt="Han Solo"
                                                                />
                                                            }
                                                            content={
                                                                <p>
                                                                    {item.content}
                                                                </p>
                                                            }
                                                            datetime={
                                                                <Tooltip>
                                                                    <span>{moment(item.time).format('YYYY-MM-DD HH:mm:ss')}</span>
                                                                </Tooltip>
                                                            }
                                                            />
                                                    )
                                                })
                                            }
                                        </div>):(<div style={{textAlign:"center",fontSize:16,color:"#ccc",Height:"50px",lineHeight:"50px"}}>暂无动态信息,请发布动态</div>)
                                    }
                                </div>
                            </div>
                        </Col>
                    </Row>
                </div>
        );
    }
}

export default Mine


